<template>
  <el-dialog :title="dataForm.id ? $t('common.editBtn') : $t('common.addBtn')" v-model="visible" width="800"
             :close-on-click-modal="false" draggable>
    <el-form :model="dataForm" :rules="dataRules" label-width="150px" ref="dataFormRef" v-loading="loading">
      <el-row :gutter="50">
        <el-col :span="12" class="mb-6">
          <el-form-item :label="$t('basProcess.productionLineCode')" prop="productionLineCode">
            <el-input clearable :placeholder="$t('basProcess.enterProductionLineCode')"
                      v-model="dataForm.productionLineCode"/>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="mb-6">
          <el-form-item :label="$t('basProcess.productionLineName')" prop="productionLineName">
            <el-input clearable :placeholder="$t('basProcess.enterProductionLineName')"
                      v-model="dataForm.productionLineName"/>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="mb-6">
          <el-form-item :label="$t('basProcess.outputMaterialCode')" prop="outputMaterialCode">
            <!-- <el-select :placeholder="$t('basProcess.enterMaterialCode')" filterable remote @change="changeMaterialout"
                       :remote-method="getMaterial" v-model="dataForm.outputMaterialCode">
              <el-option v-for="item in materialList" :key="item.materialCode" :label="item.materialCode"
                         :value="item">
                <span style="float: left">{{ item.materialCode }}</span>
                <span style=" float: right;  color: var(--el-text-color-secondary);  font-size: 13px; "> {{
                    item.materialName
                  }} </span>
              </el-option>
            </el-select> -->
            <MaterialSelect @change="getMaterial" :placeholder="$t('basProcess.enterMaterialCode')" v-model="dataForm.outputMaterialCode"/>
          </el-form-item>
        </el-col>
        <!--<el-col :span="12" class="mb-6">
          <el-form-item :label="$t('basProcess.inputMaterialCode')" prop="inputMaterialCode">
            <el-select :placeholder="$t('basProcess.enterMaterialCode')" filterable remote @change="changeMaterialin"
                       :remote-method="getMaterial" v-model="dataForm.inputMaterialCode">
              <el-option v-for="item in materialList" :key="item.materialCode" :label="item.materialCode"
                         :value="item">
                <span style="float: left">{{ item.materialCode }}</span>
                <span style=" float: right;  color: var(--el-text-color-secondary);  font-size: 13px; "> {{
                    item.materialName
                  }} </span>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>-->
        <el-col :span="12" class="mb-6">
          <el-form-item :label="$t('basProcess.isPqc')" prop="isPqc">
            <el-select v-model="dataForm.isPqc">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="mb-6">
          <el-form-item :label="$t('basProcess.isProductCheck')" prop="isProductCheck">
            <el-select v-model="dataForm.isProductCheck">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="mb-6">
          <el-form-item :label="$t('basProcess.productionlineStatus')" prop="productionlineStatus">
            <el-select v-model="dataForm.productionlineStatus">
              <el-option v-for="item in optionsP" :key="item.value" :label="item.label" :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
            <span class="dialog-footer">
                <el-button @click="visible = false" icon="Close">{{ $t('basProcess.cancel') }}</el-button>
                <el-button type="primary" @click="onSubmit"
                           :disabled="loading" icon="Check">{{ $t('basProcess.confirm') }}</el-button>
            </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import {nextTick, reactive, ref} from 'vue';
import {useMessage} from "/@/hooks/message";
import {createOrEditProductionline, getAllMaterialsForNameOrCode} from '/@/api/platform/digital/basProcess'
import {useI18n} from 'vue-i18n';
import MaterialSelect from "/@/components/mes/select/MaterialSelect.vue";

const emit = defineEmits(['refresh']);

const {t} = useI18n();
// 定义变量内容
const dataFormRef = ref();
const visible = ref(false);

const materialList = ref()
const value = ref<string[]>([])
const valuepqc = ref<string[]>([])
const valuestatus = ref<string[]>([])

const loading = ref(false)

//把选择器的值赋值给入参
const changeMaterialout = (data: any) => {
  dataForm.outputMaterialCode = data.materialCode;
  dataForm.outputMaterialName = data.materialName;
}

const changeMaterialin = (data: any) => {
  dataForm.inputMaterialCode = data.materialCode;
  dataForm.inputMaterialName = data.materialName;
}

//是否需要过程检验
const options = [
  {
    value: 'Y',
    label: t('basProcess.yes'),
  },
  {
    value: 'N',
    label: t('basProcess.no'),
  }
]
//产线状态
const optionsP = [
  {
    value: 'powerOn',
    label: t('basProcess.powerOn'),
  },
  {
    value: 'production',
    label: t('basProcess.production'),
  },
  {
    value: 'breakdown',
    label: t('basProcess.breakdown'),
  },
  {
    value: 'run',
    label: t('basProcess.run'),
  },
  {
    value: 'powerOff',
    label: t('basProcess.powerOff'),
  }
]

const getMaterial = (query: string) => {
  getAllMaterialsForNameOrCode({
    "materialCode": query
  }).then((res: any) => {
    if (res.code == 0) {
      materialList.value = res.data
    }
  })
}

// 定义form数据
const form = reactive({
  id: ''
})
const dataForm = reactive({
  productionLineCode: '',
  productionLineName: '',
  outputMaterialCode: '',
  outputMaterialName: '',
  inputMaterialCode: '',
  inputMaterialName: '',
  isPqc: '',
  isProductCheck: '',
  productionlineStatus: '',
  id: '',
  processId: ''
})

const onSelect = (data: any) => {
  dataForm.warehouseCode = data.warehouseCode;
  dataForm.warehouseId = data.id;
  dataForm.warehouseName = data.warehouseName;
}

// 定义表单校验规则
const dataRules = reactive({
  productionLineCode: [
    {required: true, message: t('basProcess.enterProductionLineCode'), trigger: 'blur'},
  ],
  productionLineName: [
    {required: true, message: t('basProcess.enterProductionLineName'), trigger: 'blur'},
  ],
  isPqc: [
    {required: true, message: t('basProcess.enterIsPqc'), trigger: 'blur'},
  ],
  isProductCheck: [
    {required: true, message: t('basProcess.enterIsProductCheck'), trigger: 'blur'},
  ],
  productionlineStatus: [
    {required: true, message: t('basProcess.enterProductionlineStatus'), trigger: 'blur'},
  ]
})

// 提交
const onSubmit = async () => {
  const valid = await dataFormRef.value.validate().catch(() => {
  });
  if (!valid) return false;

  try {
    loading.value = true;
    await createOrEditProductionline(dataForm);
    useMessage().success(dataForm.id ? t('basProcess.editSuccess') : t('basProcess.addSuccess'));
    visible.value = false;
    emit('refresh');
  } catch (err: any) {
    useMessage().error(err.msg);
  } finally {
    loading.value = false;
  }
};
// 打开弹框
const openAddDialog = (id) => {
  visible.value = true;
  dataForm.id = null
  dataForm.productionLineCode= null
  dataForm.productionLineName= null
  dataForm.outputMaterialCode= null
  dataForm.outputMaterialName= null
  dataForm.inputMaterialCode= null
  dataForm.inputMaterialName= null
  dataForm.isPqc= null
  dataForm.isProductCheck= null
  dataForm.productionlineStatus= null
  dataForm.processId = id
  // 重置表单数据
  nextTick(() => {
    dataFormRef.value?.resetFields();
  });

};

// 编辑弹框
const openEditDialog = (data: any) => {
  visible.value = true;
  value.value = data.warehouseCode;
  value.key = data.warehouseId;
  value.label = data.warehouseName;
  // 将data中的数据解构到dataForm中
  Object.assign(dataForm, data);
}

// 暴露变量
defineExpose({
  openAddDialog, openEditDialog
});
</script>
